<template>
  <v-container grid-list-xl>
    <v-layout wrap >
      <feed-card
        v-for="(article, i) in paginatedArticles"
        :key="i"
        :size="layout[i]"
        :value="article"
      />
    </v-layout>
  </v-container>
</template>

<script>

export default {
  components: {
    FeedCard: () => import("@/components/wechat/FeedCard")
  },
  data: () => ({
    articles: [
      {
        title: "小程序",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "小游戏",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "公众号",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "小程序",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "小游戏",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "公众号",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "小程序",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "小游戏",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      },
      {
        title: "公众号",
        icon: "mdi-message-text",
        image: require(`@/assets/whitebackground.png`)
      }
    ],
    layout: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
    page: 1
  }),

  computed: {
    pages() {
      return Math.ceil(this.articles.length / 11);
    },
    paginatedArticles() {
      const start = (this.page - 1) * 11;
      const stop = this.page * 11;
      return this.articles.slice(start, stop);
    }
  },

  watch: {
    page() {
      window.scrollTo(0, 0);
    }
  }
};
</script>
